<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: "微软雅黑";
    }

    #allmap {
      width: 100%;
      height: 100%;
      position: relative;
    }

    #allmap::after {
      content: '大表地理位置分布图';
      position: absolute;
      margin: 0;
      padding: 0.4em;
      width: 100%;
      text-align: center;
      font-size: 1.8em;
      letter-spacing: 0.5em;
      font-family: "Arial","黑体","宋体",sans-serif;
      color: #FFF;
      background-color: rgba(88, 88, 88, 0.5);
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N"></script>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <title>大表地理位置分布图</title>
</head>

<body>
  <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
  // 百度地图API功能	
  map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(108.66, 30.25), 13);
  map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
  map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
  // 添加带有定位的导航控件
  var navigationControl = new BMap.NavigationControl({
    // 靠左下角位置
    anchor: BMAP_ANCHOR_BOTTOM_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);

  // 添加城市列表控件
  var size = new BMap.Size(10, 20);
  map.addControl(new BMap.CityListControl({
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    offset: size,
    // 切换城市之前事件
    // onChangeBefore: function(){
    //    alert('before');
    // },
    // 切换城市之后事件
    // onChangeAfter:function(){
    //   alert('after');
    // }
  }));
  var data_info = [
    [108.704979, 30.265829, "<div style='line-height:1.5em'>表地址：1908080002" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608659222" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN200" + " </br> " + "位&#x3000;置：利川市汪营镇</div>"],
    [108.714767, 30.287149, "<div style='line-height:1.5em'>表地址：1908080004" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608659333" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN200" + " </br> " + "位&#x3000;置：利川市汪营镇白屋庄村</div>"],
    [108.713348, 30.27355,  "<div style='line-height:1.5em'>表地址：1908080005" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608658111" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN125" + " </br> " + "位&#x3000;置：利川市汪营镇甘泉坝村</div>"],
    [108.650993, 30.247801, "<div style='line-height:1.5em'>表地址：1908080006" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608658222" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN125" + " </br> " + "位&#x3000;置：利川市汪营镇马鞍山村</div>"],
    [108.710854, 30.29561,  "<div style='line-height:1.5em'>表地址：1908080007" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608658333" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN125" + " </br> " + "位&#x3000;置：利川市汪营镇马道坝村</div>"],
    [108.658333, 30.260851, "<div style='line-height:1.5em'>表地址：1908080008" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608657111" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN80"  + " </br> " + "位&#x3000;置：利川市汪营镇十户长村</div>"],
    [108.677696, 30.28574,  "<div style='line-height:1.5em'>表地址：1908080009" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608657222" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN80"  + " </br> " + "位&#x3000;置：利川市汪营镇石坝村</div>"],
    [108.665642, 30.25536,  "<div style='line-height:1.5em'>表地址：1908080010" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608657333" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN80"  + " </br> " + "位&#x3000;置：利川市汪营镇石朝门村</div>"],
    [108.663872, 30.276449, "<div style='line-height:1.5em'>表地址：1908080011" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608657444" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN80"  + " </br> " + "位&#x3000;置：利川市汪营镇双岭子村</div>"],
    [108.595833, 30.198339, "<div style='line-height:1.5em'>表地址：1908080012" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608657555" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN80"  + " </br> " + "位&#x3000;置：利川市汪营镇石庙子村</div>"],
    [108.631187, 30.223709, "<div style='line-height:1.5em'>表地址：1908080012" + " </br> " + "<code>&ensp;SIM&ensp;</code>号：15608656111" + " </br> " + "表型号：SL6100" + " </br> " + "材&#x3000;质：铸铁" + " </br> " + "管&#x3000;径：DN15"  + " </br> " + "位&#x3000;置：利川市汪营镇清江村</div>"],
  ];
  var opts = {
    width: 280,     // 信息窗口宽度
    height: 230,     // 信息窗口高度
    title: "<h3 style='text-align: center;margin:.4em;'>大表信息</h3>", // 信息窗口标题
    enableMessage: true//设置允许信息窗发送短息
  };
  for (var i = 0; i < data_info.length; i++) {
    var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]));  // 创建标注
    var content = data_info[i][2];
    map.addOverlay(marker);               // 将标注添加到地图中
    addClickHandler(content, marker);
  }
  function addClickHandler(content, marker) {
    marker.addEventListener("click", function (e) {
      openInfo(content, e)
    }
    );
  }
  function openInfo(content, e) {
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
    map.openInfoWindow(infoWindow, point); //开启信息窗口
  }
</script>